<template>
	<view class="my-swiper-wrap">
		<swiper class="swiper" :indicator-dots="false" :current="active" :autoplay="false" :duration="500" @change="mySwiperChange">
			<swiper-item>
				<view class="swiper-item">
					<Library></Library>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item">
					<Commend></Commend>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item">
					<Browse></Browse>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item last-swiper">
					<Mine></Mine>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default{
		props:{
			list: {
				type: Array,
				default: () => [],
			},
			current:{
				type: Number,
				default: null,
			}
		},
		watch:{
			list(n, o){
				this.tdata = n;
			},
			current(n, o){
				this.active = n;
				uni.$emit('mySwiperOnChange', this.active)
			}
		},
		data(){
			return{
				tdata: this.list,
				active: this.current,
				
			}
		},
		methods:{
			mySwiperChange(e){
				this.active = e.detail.current;
				uni.$emit('mySwiperOnChange', this.active)
			}
		}
	}
</script>

<style lang="scss" scoped> 
	.my-swiper-wrap{
		width: 100%;
		height: 100%;
		.swiper{
			height: 100%;
			.swiper-item{
				position: absolute;
				top: 0;
				right: 0;
				left: 0;
				bottom: 0;
				padding: 0 40rpx;
				padding-top: 100rpx;
				padding-bottom: 30rpx;
				overflow-y: auto;
			}
		}
	}
</style>
